<template>
  <div class="dnbooking-area">
    <div class="middle main-area">
      <bread-crumb class="bread-crumb-padding" :list="breadCrumb"></bread-crumb>
      <tab-list :list="tabList"></tab-list>
      <div class="filter-area">
        <div class="top-area flx-row-s-c">
          <h3 class="title-h3">抢注预订搜索</h3>
        </div>
        <filter-item name="域名包含" :list="list" :button="false">
          <div class="filter-slt-area flx-row-s-c">
            <Input
              v-model.trim="test"
              placeholder=""
              maxlength="30"
              style="width: 228px"
            />
            <CheckboxGroup
              class="check-box flx-row-s-c"
              style="flex-shrink: 0"
              v-model="contentFAL"
            >
              <Checkbox label="开头"></Checkbox>
              <Checkbox label="结尾"></Checkbox>
            </CheckboxGroup>
            <div class="title">域名排除:</div>
            <Input
              v-model.trim="test"
              placeholder=""
              maxlength="30"
              style="width: 228px"
            />
            <CheckboxGroup
              class="check-box flx-row-s-c"
              style="flex-shrink: 0"
              v-model="contentFAL"
            >
              <Checkbox label="开头"></Checkbox>
              <Checkbox label="结尾"></Checkbox>
            </CheckboxGroup>
          </div>
        </filter-item>
        <filter-item name="域名后缀" :list="list"></filter-item>
        <filter-item name="域名品类" :list="list"></filter-item>
        <filter-item name="域名构成" :list="list"></filter-item>
        <filter-item name="域名特征" :list="list"></filter-item>
        <filter-item name="域名长度" :list="list">
          <div class="filter-slt-area flx-row-s-c">
            <div class="title">长度范围:</div>
            <Input
              v-model.trim="test"
              placeholder=""
              maxlength="30"
              style="width: 70px"
            />
            <div class="line"></div>
            <Input
              v-model.trim="test"
              placeholder=""
              maxlength="30"
              style="width: 70px"
            />
          </div>
        </filter-item>
        <filter-item name="价格范围" :button="false">
          <div class="filter-slt-area flx-row-s-c">
            <Input
              v-model.trim="test"
              placeholder=""
              maxlength="30"
              style="width: 70px"
            />
            <div class="line"></div>
            <Input
              v-model.trim="test"
              placeholder=""
              maxlength="30"
              style="width: 70px"
            />
          </div>
        </filter-item>
        <div class="bottom-area flx-row-s-c">
          <div class="button-style search-button">搜索</div>
          <div class="button-style clear-button">重置</div>
        </div>
      </div>
      <div class="flx-row-bw-c" style="height: 56px">
        <h3 class="title-h3">
          搜索结果
          <span>（1000）</span>
          <span class="refresh-button">点击刷新</span>
        </h3>
        <div class="flx-row-s-c page-size-button-area">
          <span>每页显示:</span>
          <div
            class="button-style"
            :class="[item == pageSize ? 'active' : 'not-active']"
            v-for="(item, index) in pageSizeList"
            :key="index"
          >
            {{ item }}条
          </div>
        </div>
      </div>
      <table class="table-area table-border">
        <thead>
          <tr>
            <th>
              <div class="line-style">域名</div>
            </th>
            <th><div class="line-style">含义</div></th>
            <th>
              <div class="line-style">
                价格
                <div class="flx-col-s-c" style="margin-left: 4px">
                  <i class="sort-icon-top"></i>
                  <i class="sort-icon-bottom"></i>
                </div>
              </div>
            </th>
            <th><div class="line-style">查询</div></th>
            <th>
              <div class="line-style">
                域名到期时间
                <div class="flx-col-s-c" style="margin-left: 4px">
                  <i class="sort-icon-top"></i>
                  <i class="sort-icon-bottom"></i>
                </div>
              </div>
            </th>
            <th>
              <div class="line-style">
                卖家ID
              </div>
            </th>
            <th><div class="line-style">操作</div></th>
          </tr>
        </thead>
        <tbody>
          <tr :class="[index % 2 == 0 ? 'lc-f' : 'lc-F9FAFB']" v-for="(item, index) in formList" :key="index">
            <td>
              <div class="line-style flx-col-s-s" style="padding: 8px 0;">
                <div class="flx-row-c-c w-p-100">
                  <Checkbox style="color:#1C9CDF"></Checkbox>
                  <span class="strong-f f-ell-sin" title="">{{ item.dn }}</span>
                </div>
                <div class="tips-area" :ref="'tipsArea' + index" v-if="item.tip">
                  <div class="scroll-area" :class="{'scroll-action': item.scroll}" :style="{'animationDuration': item.animationDuration}">
                    <span class="scroll" :ref="'tipsItem' + index">{{ item.tip }}</span>
                    <span class="scroll" v-if="item.scroll">{{ item.tip }}</span>
                  </div>
                </div>
              </div>
            </td>
            <td>
              <div class="line-style"><span class="normal-f f-ell-sin">{{ item.mean }}</span></div>
            </td>
            <td>
              <div class="line-style"><span class="c-o">￥{{ item.money }}</span></div>
            </td>
            <td>
              <div class="line-style"><span class="strong-f f-ell-sin">{{ item.search }}</span></div>
            </td>
            <td>
              <div class="line-style"><span class="normal-f">{{ item.time }}</span></div>
            </td>
            <td>
              <div class="line-style c-o">{{ item.salerId }}</div>
            </td>
            <td>
              <div class="line-style">
                <div class="button">购买</div>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
      <div class="form-page-bottom-area flx-row-bw-c">
        <div class="flx-row-s-c">
          <Checkbox></Checkbox>
          <span style="color:#1B1B1B">全选</span>
          <div class="button-style strong-button" style="margin: 0 23px 0 14px;">批量预订</div>
          <span style="color:#1B1B1B">已选择<span style="color:#F90101;">12</span>个</span>
        </div>
        <Page :total="40" show-elevator show-sizer show-total/>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "VipBuyoutPrice",
  components: {
    filterItem: () => import("_c/filterItem/filterItem.vue"),
  },
  data() {
    return {
      breadCrumb: [{ name: "一口价", to: "/buyoutprice" }],
      tabList: [
        {
          name: "出售中的域名",
          to: "/buyoutprice",
        },
        {
          name: "我出售的域名",
          to: "#",
        },
        {
          name: "出售域名",
          to: "#",
        },
      ],
      list: [
        {
          name: "cn",
        },
        {
          name: "com.cn",
        },
        {
          name: "com",
        },
        {
          name: "com",
        },
        {
          name: "com",
        },
        {
          name: "com",
        },
        {
          name: "com",
        },
        {
          name: "com",
        },
      ],
      timeList: [
        {
          name: "3月4日",
        },
        {
          name: "3月5日",
        },
        {
          name: "3月6日",
        },
        {
          name: "3月7日",
        },
      ],
      test: "",
      contentFAL: [],
      pageSizeList: [50, 100, 200],
      pageSize: 50,
      registerDate: null,
      registerDateList: [
        {
          value: 1,
          label: '不限'
        },
        {
          value: 2,
          label: '2017年以前'
        },
        {
          value: 3,
          label: '2016年以前'
        }
      ],
      formList: [
        {
          dn: 'jiangli.cn',
          tip: '数四数四数四数四jiangli.cnjiangli.cnjiangli.cn',
          mean: '四数四数四数四数四数四数四数四数四数',
          search: '百度 爱站 谷歌',
          salerId: '超级苏韦达风格的撒',
          money: '800.00',
          time: '1天10时20分'
        },
        {
          dn: 'jiangjianglijianglili.cn',
          tip: '数四数四数四数四jiangli.cnjiangli.cnjiangli.cn数四数四数四数四jiangli.cnjiangli.cnjiangli.cn数四数四数四数四jiangli.cnjiangli.cnjiangli.cn',
          mean: '四数四数',
          search: '百度 爱站 谷歌',
          salerId: '超级苏韦达风格的撒',
          money: '800.00',
          time: '1天10时20分'
        },
        {
          dn: 'jiangjianglijianglili.cn',
          tip: '数四数四数四数',
          mean: '四数四数',
          search: '百度 爱站 谷歌',
          salerId: '超级苏韦达风格的撒',
          money: '800.00',
          time: '1天10时20分'
        }
      ]
    };
  },
  mounted() {
    this.scrollTip();
  },
  methods: {
    scrollTip() {
      for(let i in this.formList) {
        if(this.formList[i].tip) {
          let item = 'tipsArea' + i;
          let length = this.$refs[item][0].clientWidth;
          let itemLength = this.$refs['tipsItem' + i][0].offsetWidth;
          if(itemLength > length) {
            this.$set(this.formList[i], 'scroll', true);
            this.$set(this.formList[i], 'animationDuration', itemLength / 30 + 's');
          }
          this.$refs[item][0].style.animationDuration = ''
        }
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.dnbooking-area {
  background-color: #f7f7f7;
  padding-bottom: 20px;
  .filter-area {
    margin-top: 15px;

    .filter-slt-area {
      height: 47px;

      .check-box {
        flex-shrink: 0;
        margin-left: 11px;
        margin-right: 56px;
      }

      .line {
        width: 20px;
        border-top: rgba($color: #898989, $alpha: 0.4) solid 1px;
        margin: 0 10px;
      }
    }
  }
}
</style>
